<template>
  <h1>隐藏显示指令</h1>
<!--v-if="布尔值" true表示显示 false元素消失
    false表示该元素不会被渲染到DOM中，直接跳过该元素的渲染-->
  <p v-if="true">张三</p>
  <p v-if="false">李四</p>
  <br>
<!--v-show="布尔值" true表示显示 false元素消失
    false是通过修改display:none; CSS属性让元素消失的-->
  <p v-show="true">王五</p>
  <p v-show="false">赵六</p>
  <hr>
  <p v-if="isShow">太阳</p>
  <p v-else>月亮</p>
</template>

<script setup>
import {ref} from "vue";
const isShow = ref(true);
</script>


<style scoped>

</style>